import React from 'react';
import { Form, Input, Button, message, Typography } from 'antd';
import { UserOutlined, LockOutlined, KeyOutlined, SafetyOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { RegisterRequest } from '@/types/account';
import { accountService } from '@/services/accountService';
import styles from './Register.module.css';

const { Title } = Typography;

const Register: React.FC = () => {
  const navigate = useNavigate();
  const [form] = Form.useForm();

  const onFinish = async (values: RegisterRequest) => {
    try {
      await accountService.register(values);
      message.success('注册成功！');
      navigate('/login');
    } catch (error: any) {
      if (error.response?.data?.data) {
        const errors = error.response.data.data;
        Object.entries(errors).forEach(([key, messages]) => {
          form.setFields([{
            name: key,
            errors: messages as string[],
          }]);
        });
      } else {
        message.error('注册失败，请稍后重试');
      }
    }
  };

  return (
    <div className={styles.registerContainer}>
      <div className={styles.decorationBackground}>
        <div className={styles.circle1}></div>
        <div className={styles.circle2}></div>
        <div className={styles.circle3}></div>
        <div className={styles.square1}></div>
        <div className={styles.square2}></div>
      </div>
      
      <div className={styles.formWrapper}>
        <Form
          form={form}
          name="register"
          onFinish={onFinish}
          layout="vertical"
          className={styles.registerForm}
        >
          <Title level={2} className={styles.formTitle}>加入 Jupiter OJ</Title>
          <p className={styles.formSubtitle}>创建您的账户，开始编程之旅</p>
          
          <Form.Item
            name="username"
            rules={[
              { required: true, message: '请输入用户名' },
              { max: 150, message: '用户名不能超过150个字符' },
              { pattern: /^[\w.@+-]+$/, message: '用户名只能包含字母、数字和@/./+/-/_' }
            ]}
          >
            <Input 
              prefix={<UserOutlined className={styles.inputIcon} />} 
              placeholder="用户名" 
              size="large"
            />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[
              { required: true, message: '请输入密码' },
              { min: 6, message: '密码至少6个字符' }
            ]}
          >
            <Input.Password 
              prefix={<LockOutlined className={styles.inputIcon} />} 
              placeholder="密码" 
              size="large"
            />
          </Form.Item>
          
          <Form.Item
            name="password_confirm"
            dependencies={['password']}
            rules={[
              { required: true, message: '请确认密码' },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('password') === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('两次输入的密码不一致'));
                },
              }),
            ]}
          >
            <Input.Password 
              prefix={<SafetyOutlined className={styles.inputIcon} />} 
              placeholder="确认密码" 
              size="large"
            />
          </Form.Item>
          
          <Form.Item
            name="invitation_code"
            rules={[
              { required: true, message: '请输入邀请码' }
            ]}
          >
            <Input 
              prefix={<KeyOutlined className={styles.inputIcon} />} 
              placeholder="邀请码" 
              size="large"
            />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" block size="large" className={styles.submitButton}>
              注册
            </Button>
          </Form.Item>

          <div className={styles.formFooter}>
            <Button type="link" onClick={() => navigate('/login')}>
              已有账号？立即登录
            </Button>
          </div>
        </Form>
      </div>
    </div>
  );
};

export default Register; 